<template>
	<view class="wf-box">
		<view class="head" :style="{ paddingTop: navBarHeight }">
			<view class="head-np">
				<view class="back" @click="back()">
					<image src="../../static/img/chat-09.png"></image>
				</view>
				<view class="title">账单记录</view>
				<view></view>
			</view>
		</view>
		<view class="tab">
			<view class="tab_item" :class="tabIndex==0? 'tab_sel':''" @click="tab(0)">
				<view class="t_i_text">全部</view>
				<view v-if="tabIndex==0" class="t_i_line"></view>
			</view>
			<!-- <view class="tab_item" :class="tabIndex==1? 'tab_sel':''" @click="tab(1)">
				<view class="t_i_text">KT</view>
				<view v-if="tabIndex==1" class="t_i_line"></view>
			</view> -->
			<view class="tab_item" :class="tabIndex==2? 'tab_sel':''" @click="tab(2)">
				<view class="t_i_text">USDT</view>
				<view v-if="tabIndex==2" class="t_i_line"></view>
			</view>
		</view>

		<view class="main" :style="{ paddingTop: navBarHeight }">
			<view class="item" v-for="item in list" @click="details()">
				<image src="@/static/img/record_1.png" mode=""></image>
				<view>
					<view class="text_1">USDT转账</view>
					<view class="text_2">{{item.created}}</view>
				</view>
				<view>+{{item.amount}}USDT</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {fundRecord} from '@/api/api.js'
	import navBarMixin from '@/mixin/navBarMixin.js'
	export default {
		data() {
			return {
				page: 1,
				size: 10,
				tabIndex: 0,
				list: '',
				isAll: false,
			}
		},
		mixins: [navBarMixin],
		onLoad(option) {
			this.record()
		},
		methods: {
			record() {
				fundRecord({pageNum:this.page,pageSize:this.size}).then(res=>{
					console.log(res);
					if(res.code==0) {
						var info = this.list
						if (this.page == 1) {
							this.list = res.data.records
						} else {
							this.list = info.concat(res.data.records)
						}
						this.isAll = this.list.length <10 ? false : true
					}
				})
			},
			back() {
				uni.navigateBack()
			},
			details() {
				uni.navigateTo({
					url:'/pages/me/rechargeDetails'
				})
			},
			tab(e) {
				this.tabIndex = e
				this.page = 1
				// this.info()
			},
		},
		onReachBottom() {
			console.log(this.isAll);
			if (this.isAll) {
				this.page++;
				if (this.tabIndex) this.select()
				else this.info()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.wf-box {
		overflow: hidden;

		.back {
			image {
				width: 20rpx;
				height: 37rpx;
			}
		}

		.head {
			position: fixed;
			z-index: 333;
			width: 100%;
			background: #fff;

			.head-np {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				height: 96rpx;
				padding: 0 30rpx;
				box-sizing: border-box;

				.title {
					font-size: 36rpx;
					font-weight: bold;
				}
			}
		}

		.tab {
			width: calc(100vw - 200rpx);
			height: 120rpx;
			padding: 0 100rpx;
			box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(0, 0, 0, 0.15);
			display: flex;
			align-items: center;
			justify-content: space-between;
			background-color: white;
			position: fixed;
			top: 96rpx;
			left: 0;
			z-index: 222;

			.tab_item {
				color: #999999;
				position: relative;
				font-size: 30rpx;

				.t_i_text {}

				.t_i_line {
					width: 52rpx;
					height: 6rpx;
					margin: 8rpx auto 0;
					background: #3F93FF;
					border-radius: 4rpx;

				}
			}

			.tab_sel {
				font-weight: 500;
				font-size: 32rpx;
				color: #333333;
			}
		}

		.main {
			// margin-top: 126rpx;
			margin-top: 246rpx;
			margin: 246rpx 30rpx 60rpx;
			padding: 0 30rpx;
			background-color: white;
			border-radius: 10rpx;

			.item {
				height: 150rpx;
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #EEEEEE;

				image {
					width: 54rpx;
					height: 54rpx;
					margin-right: 20rpx;
				}

				view {
					.text_1 {
						font-size: 30rpx;
						color: #333333;
						line-height: 42rpx;
					}
					.text_2 {
						height: 42rpx;
						font-size: 26rpx !important;
						font-weight: 400 !important;
						color: #999999;
						line-height: 42rpx;
						margin-top: 8rpx;
					}
					&:nth-of-type(1) {
						flex: 1;
					}

					&:nth-of-type(2) {
						font-weight: 500;
						font-size: 30rpx;
					}
				}
			}
		}
	}
</style>